<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Environment Detection Test / 环境检测测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 2rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        .info-item {
            margin: 1rem 0;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            border-left: 4px solid #fff;
        }
        .info-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .info-value {
            font-family: monospace;
            background: rgba(0, 0, 0, 0.2);
            padding: 0.5rem;
            border-radius: 4px;
            word-break: break-all;
        }
        .status-allowed {
            border-left-color: #28a745;
        }
        .status-denied {
            border-left-color: #dc3545;
        }
        .test-button {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid white;
            color: white;
            padding: 1rem 2rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            margin: 1rem 0.5rem 1rem 0;
            transition: all 0.3s ease;
        }
        .test-button:hover {
            background: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Environment Detection Test</h1>
        <h2>环境检测测试</h2>
        
        <div id="environment-info">
            <p>Loading environment information... / 正在加载环境信息...</p>
        </div>
        
        <button class="test-button" onclick="testEnvironment()">Refresh Test / 刷新测试</button>
        <button class="test-button" onclick="simulateProduction()">Simulate Production / 模拟生产环境</button>
        <button class="test-button" onclick="testAccessDenied()">Test Access Denied / 测试访问拒绝</button>
    </div>

    <script type="module">
        // Import environment checker functions
        // 导入环境检测函数
        import {
            isProduction,
            isDevelopment,
            isWeChatWork,
            isWeChat,
            shouldEnforceWeChatWork,
            isAccessAllowed,
            getEnvironmentInfo,
            showAccessDeniedMessage
        } from './src/utils/environmentChecker.js'

        // Display environment information
        // 显示环境信息
        function displayEnvironmentInfo() {
            const info = getEnvironmentInfo()
            const container = document.getElementById('environment-info')
            
            container.innerHTML = `
                <div class="info-item ${info.isAccessAllowed ? 'status-allowed' : 'status-denied'}">
                    <div class="info-label">Access Status / 访问状态</div>
                    <div class="info-value">${info.isAccessAllowed ? '✅ Allowed / 允许' : '❌ Denied / 拒绝'}</div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">Environment / 环境</div>
                    <div class="info-value">
                        Production / 生产环境: ${info.isProduction ? '✅ Yes' : '❌ No'}<br>
                        Development / 开发环境: ${info.isDevelopment ? '✅ Yes' : '❌ No'}
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">WeChat Detection / 微信检测</div>
                    <div class="info-value">
                        WeChat Work / 企业微信: ${info.isWeChatWork ? '✅ Yes' : '❌ No'}<br>
                        Regular WeChat / 普通微信: ${info.isWeChat ? '✅ Yes' : '❌ No'}
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">Enforcement / 强制检查</div>
                    <div class="info-value">
                        Should Enforce WeChat Work / 应强制企业微信: ${info.shouldEnforceWeChatWork ? '✅ Yes' : '❌ No'}
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">User Agent / 用户代理</div>
                    <div class="info-value">${info.userAgent}</div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">Environment Variables / 环境变量</div>
                    <div class="info-value">
                        NODE_ENV: ${info.nodeEnv || 'undefined'}<br>
                        VITE_MODE: ${info.viteMode || 'undefined'}
                    </div>
                </div>
            `
        }

        // Test functions
        // 测试函数
        window.testEnvironment = function() {
            displayEnvironmentInfo()
        }

        window.simulateProduction = function() {
            // Temporarily modify environment for testing
            // 临时修改环境用于测试
            const originalEnv = import.meta.env.PROD
            Object.defineProperty(import.meta.env, 'PROD', { value: true, configurable: true })
            
            alert('Simulating production environment. Check console for details.\n模拟生产环境。查看控制台获取详细信息。')
            console.log('Simulated production environment info:', getEnvironmentInfo())
            
            // Restore original environment
            // 恢复原始环境
            setTimeout(() => {
                Object.defineProperty(import.meta.env, 'PROD', { value: originalEnv, configurable: true })
                displayEnvironmentInfo()
            }, 2000)
        }

        window.testAccessDenied = function() {
            if (confirm('This will show the access denied page. Continue?\n这将显示访问拒绝页面。继续吗？')) {
                showAccessDeniedMessage()
            }
        }

        // Initialize on page load
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', displayEnvironmentInfo)
        displayEnvironmentInfo()
    </script>
</body>
</html>